<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .app-container {
      display: flex;
      justify-content: space-around;
    }
    .qr-code {}
    .container {
      height: 300px;
      width: 600px;
      margin: 0 auto;
      background: #e3e3e3;
      border: 1px solid #e6e6e6;
      overflow: auto;
      word-break: break-all;
      padding: 10px;
    }
    ol {
      text-align: left;
    }
    .log {
      text-align: center;
      height: calc(100vh - 120px);
    }
    .config {
      height: 50px;
    }
    .info {
      height: 120px;
    }
  </style>
</head>

<body>
  <div class="app-container">
    <div class="qr-code">
      <h1>登录二维码</h1>
      <img src="/static/img/qr.jpg" alt="" width="200px" height="200px" id="qr-img">
      <section>
        <h2>配置信息：</h2>
        <div class="container config">
          <div>阿里同步网盘文件夹名：{{ALI_FOLDER_NAME}}</div>
          <div>本地路径：{{LOCAL_FOLDER_NAME}}</div>
        </div>
      </section>

      <section>
        <h2>提示信息：</h2>
        <div class="container info">
          <ol>
            {% for i in info %}
            <li>{{ i }}</li>
            {% endfor %}
          </ol>
        </div>
      </section>
    </div>
    <div>
      <section>
        <h2>log</h2>
        <div class="container log">
          <ol>
            {% for i in log %}
            <li>{{ i }}</li>
            {% endfor %}
          </ol>
        </div>
      </section>
    </div>
  </div>
  <script>
    setInterval(function () {
      // let qrImg = document.getElementById("qr-img")
      // qrImg.setAttribute("src", "/static/img/qr.jpg?t=" + Date.parse(Date()))
      window.open("/", "_self")
    }, 10000)

    // 日志滚动到最下方
    const elem = document.getElementsByClassName('log')[0]
    elem.scrollTop  = elem.scrollHeight
  </script>
</body>

</html>